<template>
	<view class='newsDetail'>
		<view class="lunbo">
			<swiper class="swiper-box" :current="current" :interval="5000" :duration="1000" @change='get_cur'>
				<swiper-item v-for="(item, index) in dataList" :key="index">
					<view class="list uni-flex uni-flex-align uni-flex-bt"
						:style="'background: url('+item.bg_img+') no-repeat;background-size:100% 100%'"
						:class="current==index?'active img':'img'">
						<view class="left">
							<view class="name">{{item.name}}</view>
							<view class="jibie" v-if="item.id==articleInfo.level_id">当前等级:{{articleInfo.level_name}}</view>
							<view class="jifen" v-if="item.id==articleInfo.level_id">小区业绩:{{articleInfo.plot}}</view>
							<view class="jifen" v-if="item.id==articleInfo.level_id">团队业绩:{{articleInfo.team_plot}}</view>
							<view class="jibie" v-if="item.id<articleInfo.level_id" style="height: 40rpx;"></view>
							<view class="jifen" v-if="item.id<articleInfo.level_id">当前级别高于该等级</view>
							<view class="jibie" v-if="item.id>articleInfo.level_id" style="height: 40rpx;"></view>
							<view style="width: 350rpx;" class="jifen flex flex-align" v-if="item.id>articleInfo.level_id">
								<view class="" v-if="item.plot!=0">小区业绩达到{{item.plot}},团队业绩达到{{item.team_plot}}可升级</view>
								<view class="" v-else>团队业绩达到{{item.team_plot}}可升级</view>
							</view>
						</view>
						<view class="right">
							<image :src="item.logo" mode="widthFix" style="width: 200rpx;"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="jindu">
			<view class=" uni-flex uni-flex-align">
				<view class="name">团队业绩</view>
				<view class="jindus">
					<view class="active" :style="'width:'+articleInfo.percent+'%'"></view>
				</view>
				<view class="baifenbi">{{articleInfo.percent}}%</view>
			</view>
			<view class=" uni-flex uni-flex-align" style="margin-top: 30rpx;" v-if="current==0">
				<view class="name">小区业绩</view>
				<view class="jindus">
					<view class="active" :style="'width:'+articleInfo.percent_plot+'%'"></view>
				</view>
				<view class="baifenbi">{{articleInfo.percent_plot}}%</view>
			</view>
		</view>
		
		<view class="quanyi">
			<view class="title">
				当前享受权益
			</view>
			<view class=" uni-flex flex-line" style="padding: 0 30rpx;">
				<jyf-parser :html="mang_list.remark" ref="article"></jyf-parser>
			</view>
		</view>
		</view>
		
		<!-- <ad-rewarded-video ref="adRewardedVideo" :preload="false" :adpid="adpids" :loadnext="true"
			v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">

		</ad-rewarded-video> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				articleInfo: {},
				id: '',
				type: '',
				current: 0,
				mang_list: [],
				dataList: [],
				balance: '',
				adpids: ["1521500086", "1909318888", "1808693967", "1563695133", "1153909896"],
				loading: false,
			}
		},
		onLoad() {
			let that = this
			// that.articleInfo = JSON.parse(e.data)
			that.getData()
		},
		methods: {
			go_url(e) {
				this.tui.href(e)
			},
			getData() {
				let that = this
				that.tui.request("api.auth.center/levelInfo", "GET", {}, false, false, true).then((res) => {
					that.articleInfo = res.data
					that.dataList = res.data.list
					res.data.list.map((item, index) => {
						if (res.data.level_name == item.name) {
							that.mang_list = that.dataList[index]
							that.current = index
						}
					})
					that.mang_list = that.dataList[0]
				}).catch((res) => {

				})
			},
			get_cur(e) {
				let that = this
				that.current = e.detail.current
				that.mang_list = that.dataList[that.current]
			},
			change() {

			},
			close() {
				let that = this
				that.$refs.qiandao.close()
			},
			qiandao() {
				let that = this
				if (that.articleInfo.is_sign == 1) {
					return
				}
				that.$refs.adRewardedVideo.show();
			},
			onadload(e) {
				let that = this
				uni.hideLoading()
				// that.$refs.adRewardedVideo.show();
				console.log('广告数据加载成功');
			},
			onadclose(e) {
				let that = this
				const detail = e.detail
				if (detail && detail.isEnded) {
					that.tui.request("api.auth.center/sign", "GET", {}, false, false, true).then((res) => {
						// that.tui.toast(res.info)
						if (res.code == 1) {
							that.balance = res.data.balance
							that.$refs.qiandao.open()
							that.getData()
						}
					}).catch((res) => {
					
					})

					console.log("onadclose " + detail.isEnded);
				} else {
					// 播放中途退出
					console.log("onadclose " + detail.isEnded);
				}
			},
			onaderror(e) {
				let that = this
				// 广告加载失败
				uni.hideLoading()
				setTimeout(function() {
					that.tui.toast("onaderror: ", e.detail)
				}, 1000)
				console.log("onaderror: ", e.detail);
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.lunbo {
		height: 305rpx;
		margin: 30rpx 30rpx;
		position: relative;

		.swiper-box {
			height: 305rpx;
			text-align: center;
			z-index: 999;

			.list {
				padding: 0 50rpx;
				box-sizing: border-box;

				.left {
					text-align: left;

					.name {
						font-weight: bold;
						font-size: 32rpx;
					}

					view {
						color: #fff;
					}

					.jibie {
						margin-bottom: 20rpx;
						font-size: 28rpx;
					}
				}

				.right {
					image {
						width: 167rpx;
						height: 213rpx;
					}
				}
			}

			.img {
				width: 100%;
				height: 305rpx;
				transition: 1s all;
				transform: scale(.7);
			}

			.img.active {
				transform: scale(1);
				transition: .5s all;
			}
		}


	}

	.jindu {
		margin: 30rpx;
		background: #fff;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;

		.baifenbi {
			color: #7177ff;
			width: 100rpx;
			text-align: right;
		}

		.name {
			width: 200rpx;
		}

		.jindus {
			background: #eaeaea;
			height: 6rpx;
			width: 100%;

			.active {
				width: 50%;
				height: 6rpx;
				background: linear-gradient(to right, #6b77ff, #a779ff);
			}
		}
	}

	.quanyi {
		margin: 30rpx;
		background: #fff;
		padding: 30rpx 0;
		border-radius: 10rpx;

		.list {
			text-align: center;
			width: 25%;

			image {
				width: 80rpx;
				height: 80rpx;
			}

		}

		.title {
			padding: 0 30rpx 30rpx;
			font-size: 32rpx;
		}
	}

	.go_btn {
		width: 500rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		text-align: center;
		background: #7177ff;
		color: #fff;
		margin: 160rpx auto;
	}

	
</style>